<template>
  <div class="app">
    <!-- <web-gl-prc-5></web-gl-prc-5> -->
    <web-gl-prc-4></web-gl-prc-4>
    <!-- <cube></cube> -->
    <!-- <web-gl-prc-3></web-gl-prc-3> -->
    <!-- <web-gl-prc-2></web-gl-prc-2> -->
   <!-- <dom-api-prc></dom-api-prc> -->
    <!-- <web-gl-prc class="webglPrc"></web-gl-prc> -->
    <!-- <hello-world class="hello"></hello-world> -->
    <!-- <video-full class="video"></video-full> -->
  </div>
</template>
<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
import WebGlPrc from './components/WebGlPrc.vue';
import HelloWorld from './components/HelloWorld.vue';
import VideoFull from './components/VideoFull.vue';
import DomApiPrc from './components/DomApiPrc.vue';
import WebGlPrc2 from './components/WebGlPrc2.vue';
import WebGlPrc3 from './components/WebGlPrc3.vue';
import Cube from './components/Cube.vue';
import WebGlPrc4 from './components/WebGlPrc4.vue';
import WebGlPrc5 from './components/WebGlPrc5.vue';


@Options({ components: {
  WebGlPrc,
  HelloWorld,
  VideoFull,
  DomApiPrc,
  WebGlPrc2,
  WebGlPrc3,
  Cube,
  WebGlPrc4,
  WebGlPrc5,
} })
export default class App extends Vue {
}
</script>

<style lang="postcss" scoped>
.app {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  &, :deep(button) {
    font-size: 20px;
  }
  .webglPrc{
    /* 为什么不加定位 就不会在页面显示 */
    /* position: absolute;
    left: 0;top: 0;
    width: 100%;
    height: 100%;
    background-color: red; */
  }
  .hello{
    position: absolute;
    left: 0;
    top: 50%;
  }
  .video{
    position: absolute;
    left: 0;
    top: 80%;
    background-color: pink;
  }
}
:deep(.directive-btn) {
  transition:transform .4s ease;
}
</style>
